import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common";
import { Row, Col, Popconfirm } from 'antd'
import moment from "moment/moment";
import Condition from "components/condition";
const { If, Else } = Condition;

import 'styles/expense-report/subsidy-item.scss'

class SubsidyItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      info: {},
      contentVisible: false,
    }
  }

  componentWillMount(){
    this.setState({info:this.props.applyData});
  }

  componentWillReceiveProps(nextProps) {
    this.setState({info:nextProps.applyData})
  }

  handleDelete = () => {
    this.props.onDelete(this.props.applyData);
  };

  // 渲染内容项
  renderContentItem = (title, value, colSpan = 8 ) => (
    <Row className="content-item">
      <Col span={colSpan} className="title">{title}：</Col>
      <Col span={24 - colSpan}>{value}</Col>
    </Row>
  );

  // 渲染不可编辑差补的内容
  renderContent = () => {
    const { withCity, isAutoCalculateEnabled } = this.props;
    const { info } = this.state;
    let renderLabel = [];
    info.expenseTypes && info.expenseTypes.map(item => {
      info.expenseTypeOIDs && ~info.expenseTypeOIDs.indexOf(item.expenseTypeOID) && renderLabel.push(item.name);
    });
    let startDate = moment(info.startDate).local().format('YYYY-MM-DD') || '-';
    let endDate = moment(info.endDate).local().format('YYYY-MM-DD') || '-';
    return (
      <div className="info-container">
        <Row>
          <If value={withCity}>
            <Condition>
              <If value={isAutoCalculateEnabled}>
                <Col span={12}>
                  {this.renderContentItem(
                    messages('expense-parent-report.key188')/*出发城市*/,
                    info.dpCityName || <span style={{color: '#ff4d4f'}}>{messages('expense-parent-report.key190')/*未填写*/}</span>
                  )}
                </Col>
                <Col span={12}>
                  {this.renderContentItem(
                    messages('expense-parent-report.key187')/*到达城市*/,
                    info.cityName || messages('expense-parent-report.key151')/*通用城市*/
                  )}
                </Col>
              </If>
              <Else>
                <Col span={12}>
                  {this.renderContentItem(
                    messages('expense-parent-report.key186')/*出差城市*/,
                    info.cityName || messages('expense-parent-report.key151')/*通用城市*/
                  )}
                </Col>
              </Else>
            </Condition>
          </If>
          <Col span={12}>
            {this.renderContentItem(messages('expense-parent-report.key241')/*行程日期*/, `${startDate} ~ ${endDate}`)}
          </Col>
          {info.subsidyEnumDTOs && info.subsidyEnumDTOs.map(item => (
            <Col span={12}>
              {this.renderContentItem(item.enumerationName, item.enumerationItemShowValue)}
            </Col>
          ))}
        </Row>
        {this.renderContentItem(messages('expense-parent-report.key43'/*差补类型*/), renderLabel.join('、'), 4)}
        {this.renderContentItem(messages('common.remark'/*备注*/), info.remark || '-', 4)}
      </div>
    )
  };

  // 渲染操作部分
  renderOperate = () => {
    const { applyData, dataList, onEdit } = this.props;
    return (
      <div className="header-operate">
        <a onClick={() => onEdit(applyData)}>{messages('common.edit')/*编辑*/}</a>
        <If value={dataList.length > 1}>
          <span className="ant-divider"/>
          <Popconfirm
            placement="topRight"
            title={messages('common.confirm.delete')/*确定要删除吗？*/}
            getPopupContainer={() => document.getElementsByClassName('header-operate')[0]}
            onConfirm={this.handleDelete}
          >
            <a className="delete">{messages('common.delete')/*删除*/}</a>
          </Popconfirm>
        </If>
      </div>
    )
  };

  render() {
    const { subsidyIndex } = this.props;
    return (
      <div className="subsidy-info">
        <div className="info-header">
          {messages('expense-parent-report.key240',{arg1: subsidyIndex})/*行程{arg1}*/}
          {this.renderOperate()}
        </div>
        {this.renderContent()}
      </div>
    )
  }
}

function mapStateToProps(state){
  return { }
}

SubsidyItem.propTypes = {
  subsidyIndex: React.PropTypes.number, //行程的序号，从1开始
  applyData: React.PropTypes.object.isRequired,
  onEdit: React.PropTypes.func,    //编辑
  onDelete: React.PropTypes.func,  //删除
  withCity: React.PropTypes.bool,
  dataList: React.PropTypes.array,
  isAutoCalculateEnabled: React.PropTypes.bool,
};

SubsidyItem.defaultProps = {
  onEdit: () => {},
  onDelete: () => {},
  withCity: true
};

export default connect(mapStateToProps)(SubsidyItem);
